<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标记遍历</title>
    <script type="text/javascript"  src="http://apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js"> </script>

    <script>
        function show() {
            var top = $("#mainframe").parent();
            var x = top.attr("id");
            alert(x);
            top.css("border","2px solid yellow");

            var middle = $("#mainframe").parentsUntil("body");
            middle.css("background-color","red");
            var y = $("#top").css("background-color");
            alert(y);

            var child = $("#mainframe").children().first();
            child.css("border","3px solid black");
        }
    </script>

</head>
<body onload="show();">
    <div id="top">
        <div id="second">
            <div id="mainframe">
                <div id="left">第一个子节点</div>
                <div id="right">第二个子节点</div>
            </div>
        </div>
    </div>
</body>
</html>